<template>
	<view class="content">
		<u-navbar>
			<u-tabs :active-color="lightColor" class="slot-wrap" :list="navList" count="count" :is-scroll="true"
				:current="tabCurrentIndex" @change="tabClick"></u-tabs>
		</u-navbar>
		<view class="swiper-box">
			<!-- 显示商品栏 -->
			<view v-if="tabCurrentIndex == 0" class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y>
					<!-- 空白页 -->
					<!-- <u-empty style="margin-top: 40rpx" text="暂无收藏商品数据" mode="favor" ></u-empty> -->
					<!-- 商品展示数据 -->
					<u-swipe-action @open="openLeftChange()" btn-width="180" :options="LeftOptions"
						v-for="(item, index) in 2" @click="clickGoodsSwiperAction()" :index="index" :key="index">
						<view class="goods" @click="goGoodsDetail()">
							<u-image width="131rpx" height="131rpx"
								src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/ebc6c9e114d6416f9985a3ff7c8ea19f.png"
								mode="aspectFit">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="goods-intro">
								<view>商品名字</view>
								<view class="goods-sn">商品介绍</view>
								<view>￥11</view>
							</view>
						</view>
					</u-swipe-action>
				</scroll-view>
			</view>
			<!-- 显示收藏的店铺栏 -->
			<view v-else class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y>
					<!-- 空白页 -->
					<!-- <u-empty style="margin-top: 40rpx" text="暂无收藏店铺数据" mode="favor" ></u-empty> -->
					<!-- 店铺展示数据 -->
					<u-swipe-action @open="openLeftChange()" btn-width="180" :options="LeftOptions"
						v-for="(item, index) in 4" :key="index" @click="clickStoreSwiperAction()">
						<view class="store" @click="goStoreMainPage()">
							<view class="intro">
								<view class="store-logo">
									<u-image width="102rpx" height="102rpx"
										src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/ebc6c9e114d6416f9985a3ff7c8ea19f.png"
										:alt="item.storeName" mode="aspectFit">
										<u-loading slot="loading"></u-loading>
									</u-image>
								</view>
								<view class="store-name">
									<view>店铺名字</view>
									<u-tag size="mini" type="error" :color="$mainColor" text="自营" mode="plain"
										shape="circle" />
								</view>
								<view class="store-collect">
									<view>进店逛逛</view>
								</view>
							</view>
						</view>
					</u-swipe-action>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lightColor: this.$lightColor,
				// 商品左滑侧边栏
				LeftOptions: [{
					text: "取消",
					style: {
						backgroundColor: this.$lightColor,
					},
				}, ],
				tabCurrentIndex: 0, //tab的下标默认为0，也就是说会默认请求商品
				navList: [
					//tab显示数据
					{
						name: "商品(0)",
						params: {
							pageNumber: 1,
							pageSize: 10,
						},
					},
					{
						name: "店铺(0)",
						params: {
							pageNumber: 1,
							pageSize: 10,
						},
					},
				],
			};
		},
		methods: {
			/**
			 * 顶部tab点击
			 */
			tabClick(index) {
				this.tabCurrentIndex = index;
			},

			/**
			 * 查看商品详情
			 */
			goGoodsDetail(val) {
				//商品详情
				uni.navigateTo({
					url: "/pages/product/goods",
				});
			},

			/**
			 * 打开商品左侧取消收藏
			 */
			openLeftChange() {
				console.log('左滑了')
			},

			/**
			 * 点击商品左侧取消收藏
			 */
			clickGoodsSwiperAction() {
				console.log('商品取消收藏')
			},

			/**
			 * 点击店铺左侧取消收藏
			 */
			clickStoreSwiperAction(val) {
				console.log('点击店铺取消收藏')
			},

			/**
			 * 查看店铺详情
			 */
			goStoreMainPage(id) {
				//店铺主页
				uni.navigateTo({
					url: "/pages/product/shopPage",
				});
			},

		},
	};
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.slot-wrap {
		flex: 1;
		display: flex;
		justify-content: center;
		padding-right: 72rpx;
	}

	.content {
		width: 100%;
	}

	.swiper-box {
		overflow-y: auto;
	}

	.list-scroll-content {
		height: 100%;
		width: 100%;
	}

	/deep/ .u-swipe-content {
		overflow: hidden;
	}

	.goods {
		background-color: #fff;
		border-bottom: 1px solid $border-color-light;
		height: 190rpx;
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;

		image {
			width: 131rpx;
			height: 131rpx;
			border-radius: 10rpx;
		}

		.goods-intro {
			flex: 1;
			font-size: $font-base;
			line-height: 48rpx;
			margin-left: 30rpx;

			view:nth-child(1) {
				line-height: 1.4em;
				font-size: 24rpx;
				max-height: 2.8em; //height是line-height的整数倍，防止文字显示不全
				overflow: hidden;
				color: #666;
			}

			view:nth-child(2) {
				color: #cccccc;
				font-size: 24rpx;
			}

			view:nth-child(3) {
				color: $light-color;
			}
		}

		button {
			color: $main-color;
			height: 50rpx;
			width: 120rpx;
			font-size: $font-sm;
			padding: 0;
			line-height: 50rpx;
			background-color: #ffffff;
			margin-top: 80rpx;

			&::after {
				border-color: $main-color;
			}
		}
	}

	.store {
		background-color: #fff;
		border: 1px solid $border-color-light;
		border-radius: 16rpx;
		margin: 20rpx 10rpx;

		.intro {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx 0 40rpx;
			height: 170rpx;

			.store-logo {
				width: 102rpx;
				height: 102rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.store-name {
				flex: 1;
				margin-left: 30rpx;
				line-height: 2em;

				:first-child {
					font-size: $font-base;
				}

				:last-child {
					font-size: $font-sm;
					color: #999;
				}
			}

			.store-collect {
				border-left: 1px solid $border-color-light;
				padding-left: 20rpx;
				text-align: center;

				:last-child {
					color: #999;
					font-size: $font-sm;
				}
			}
		}
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 26rpx;

			text {
				position: relative;
			}

			text.current {
				color: $light-color;
				font-weight: bold;
				font-size: 28rpx;

				&::after {
					content: "";
					position: absolute;
					left: 20rpx;
					bottom: -10rpx;
					width: 30rpx;
					height: 0;
					border-bottom: 2px solid $light-color;
				}
			}
		}
	}
</style>
